<template>
  <div class="_wrapper _flex _over-hidden">
    <div
      class="_wrapper-y _p-t-10 _p-b-20 _flex-y _flex-start"
      style="width: 22%"
    >
      <div class="_flex _flex-start _m-b-20 _flex-space-x _wrapper-x">
        <el-input
          class="_flex-item-1"
          v-model="formData.name"
          placeholder="请输入名称"
        />
        <el-button type="primary" @click="save()">保存</el-button>
      </div>
      <div class="_flex _flex-start _m-b-5 _flex-space-x">
        <el-button type="primary" @click="comToolDraw.openMarkerDraw()"
          >点绘制</el-button
        >
        <el-button type="primary" @click="comToolDraw.openPolylineDraw()"
          >线绘制</el-button
        >
        <el-button type="primary" @click="comToolDraw.openPolygonDraw()"
          >面绘制</el-button
        >
        <el-button type="primary" @click="comToolDraw.openEdit()"
          >编辑</el-button
        >
      </div>
      <div class="_flex _flex-start _m-b-5 _flex-wrap _flex-space">
        <el-button type="warning" @click="preivewGeoJson()">预览</el-button>
        <el-button type="primary" @click="comToolDraw.openMove()"
          >移动</el-button
        >
        <el-button type="danger" @click="comToolDraw.clear()">清理</el-button>
        <el-button type="warning" @click="comToolDraw.openSelect()"
          >选择</el-button
        >
      </div>
      <div class="_p5" v-if="selectList && selectList.length > 0">
        <div class="_flex _m-b-5">
          <div class="_font _m-r-5">唯一标识</div>
          <div class="_flex-item-1">
            <el-input
              v-model="selectList[0].properties.code"
              placeholder="请输入唯一标识"
            ></el-input>
          </div>
        </div>
        <div class="_flex _m-b-5">
          <div class="_font _m-r-5">模块名称</div>
          <div class="_flex-item-1">
            <el-input
              v-model="selectList[0].properties.name"
              placeholder="请输入模块名称"
            ></el-input>
          </div>
        </div>
        <div class="_flex">
          <div class="_font _m-r-5" style="width: 110px">填充颜色</div>
          <div>
            <com-color-select
              v-model="selectList[0].properties.color"
            ></com-color-select>
          </div>
        </div>
        <div class="_flex">
          <div class="_font _m-r-5" style="width: 110px">中心坐标</div>
          <div>
            <div class="_flex _flex-space">
              <el-input v-model="selectList[0].properties.center[0]" />
              <el-input v-model="selectList[0].properties.center[1]" />
            </div>
          </div>
        </div>
        <div class="_text-a-r _m-t-20">
          <el-button type="primary" @click="propList.push({})">+</el-button>
        </div>
        <div class="_flex _flex-space" v-for="(item, _index) in propList">
          <el-input v-model="item.name" />
          <el-input v-model="item.val" />
          <el-button type="danger">-</el-button>
        </div>
      </div>
      <div class="_flex-item-1"></div>
      <div class="_flex _m-b-5 _flex-space _flex-wrap _wrapper-x">
        <div
          class="_text-a-r _wrapper-x _font-reminder _font-mini"
          @click="initRows()"
        >
          刷新
        </div>
        <div class="_wrapper-x _flex" v-for="item in list" :key="item.id">
          <el-button class="_flex-item-1" @click="select(item)">{{
            item.name
          }}</el-button>
          <el-button type="danger">删除</el-button>
        </div>
      </div>
    </div>
    <com-map-baidu @initComplete="initComplete"></com-map-baidu>
    <el-drawer v-model="isDrawer">
      {{ formData.geojson }}
      <el-input
        class="_m-t-10 _m-b-10"
        v-model="geoJsonText"
        type="textarea"
      ></el-input>
      <el-button type="primary" @click="updateJson(geoJsonText)"
        >更新</el-button
      >
    </el-drawer>
  </div>
</template>
<script>
import ComMapBaidu from "@/components/com-map-baidu/com-map-baidu.vue";
import ToolDrawInit from "@/components/com-map-baidu/ToolDraw.js";
import { toRaw } from "vue";

import toolAction from "@/tool/http/tool-action";

let cusGeoJsonApi = toolAction.init("data_geojson_cus");

export default {
  components: { ComMapBaidu },
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      comMapBaidu: undefined,
      comToolDraw: undefined,
      isDrawer: false,
      formData: {},
      list: [],
      selectList: undefined,
      geoJsonText: "",
      propList: [],
    };
  },
  mounted() {
    this.formData.id = this.id;
    this.initRows();
  },
  methods: {
    initRows() {
      cusGeoJsonApi.list().then((res) => {
        this.list = res;
      });
    },
    initComplete(comMapBaidu) {
      this.comMapBaidu = comMapBaidu;
      ToolDrawInit(comMapBaidu.map(), (toolDraw) => {
        this.comToolDraw = toolDraw;
        this.selectList = this.comToolDraw.getSelects();
      });
    },
    preivewGeoJson() {
      this.initGeoJson();
      this.isDrawer = true; // 显示选择工具条的选择区域游戏面画面控制台中显示
    },
    select(row) {
      this.updateJson(row.geojson);
      this.formData = row;
    },
    updateJson(genJsonText) {
      if (typeof genJsonText == "string") {
        genJsonText = JSON.parse(genJsonText);
      }
      this.comToolDraw.clear();
      this.comToolDraw.renderGeoJson(genJsonText);
    },
    initGeoJson() {
      if (
        this.propList &&
        this.propList.length > 0 &&
        this.selectList &&
        this.selectList.length > 0
      ) {
        this.propList.forEach((element) => {
          this.selectList[0].properties[element.name] = element.val;
        });
      }
      this.formData.geojson = {
        type: "FeatureCollection",
        features: this.comToolDraw.toGeoJson(),
      };
    },
    save() {
      this.initGeoJson();
      cusGeoJsonApi.sync(this.formData).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>
<style scoped>
.el-button .el-button,
.el-button + .el-button {
  margin-left: 3px;
}
</style>
